<template>
  <div class="configInstallInfo">
    <div class="mains_contain">
      <div class="contant">
        <el-table :data="tableData" style="width: 100%" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="taskName" label="任务名称" />
          <el-table-column prop="name" label="容器名称" />
          <el-table-column prop="version" label="容器版本" />
          <el-table-column prop="filesize" label="容器大小" />
          <el-table-column prop="manufactor" label="厂家" />
          <el-table-column prop="operatingSystem" label="操作系统" />
          <el-table-column prop="framework" label="架构" />
          <el-table-column label="操作" align="center" min-width="100">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="handlerAdd(row)" icon="el-icon-plus">添加设备</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider content-position="left">
          <span>设备详细信息</span>
          <span @click="handlerConfig" style="padding-left: 20px;color: #409eff;cursor: pointer;" v-if="SelectedTableData.length">批量配置</span>
        </el-divider>
        <el-table :data="SelectedTableData" ref="SelectedTableData" style="width: 100%" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="nodeId" label="设备标识" />
          <el-table-column prop="deviceModel" label="设备型号" />
          <el-table-column prop="containerName" label="容器名称">
          </el-table-column>
          <el-table-column prop="containerIndex" label="容器下标">
          </el-table-column>
          <el-table-column prop="containerIp" label="容器IP地址" />
          <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" />
          <el-table-column prop="containerStorageTotal" label="存储空间（MB）" />
          <el-table-column prop="containerCpuPeriod" label="CPU的运行周期(μs)" width="150" />
          <el-table-column prop="containerCpuQuota" label="CPU运行时间(μs)" width="150" />
          <el-table-column prop="containerHyperv" label="技术类型" />
          <el-table-column prop="containerIoPort" label="物理接口" width="130" />
          <el-table-column prop="volumes" label="卷列表">
            <template slot-scope="{ row,$index}">
              <span style="color:#409eff;cursor: pointer;" v-if="row.volumes&&row.volumes.length" @click="checkVolume(row)">查看</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="70" fixed="right">
            <template slot-scope="{ row,$index}">
              <el-button type="text" style="color: #f56c6c" size="mini" icon="el-icon-delete" @click="handleDelete(row,$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0 0 0;text-align: right;">共{{SelectedTableData.length?SelectedTableData.length:0}}条</div>
      </div>
    </div>
    <el-dialog title="数据卷列表" :visible.sync="dialogVisibleVolume" top="50px" width="1000px" :close-on-click-modal="false">
      <el-table :data="volumesList" ref="deviceTableDataRef" style="width: 100%" fit
        :max-height="maxHeightOther" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <el-table-column prop="path" label="数据卷根目录"  />
        <el-table-column prop="size" label="数据卷大小（MB）"  />
        <el-table-column prop="visible" label="数据卷权限">
           <template slot-scope="{ row,$index}">
             <span v-if="row.visible==0">不可访问</span>
             <span v-if="row.visible==1">可访问</span>
           </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="添加设备" :visible.sync="dialogVisible" top="50px" width="1000px" @close="cancle" :close-on-click-modal="false">
      <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" :rules="rules">
        <el-form-item label="设备标识">
          <el-select v-model="searchForm.nodeId" v-loading="selectLoading" :remote-method="remoteMethod" remote reserve-keyword filterable placeholder="请选择" clearable>
            <el-option v-for="item in deviceNodeIdList" :key="item.nodeId" :label="item.nodeId" :value="item.nodeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.deviceType" filterable placeholder="请选择" clearable>
            <el-option v-for="item in deviceModelList" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="站点">
          <el-select v-model="searchForm.siteId" filterable placeholder="请选择" clearable @change="onChangeSite">
            <el-option v-for="item in siteList" :key="item.id" :label="item.sitesName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogSearch" size="mini" icon="el-icon-search">查询</el-button>
          <!-- <el-button type="primary" @click="dialogSearch2" size="mini" icon="el-icon-search">查询111</el-button> -->
        </el-form-item>
      </el-form>
      <el-table :data="deviceTableData" ref="deviceTableDataRef" :reserve-selection='true' v-el-table-infinite-scroll="load" style="width: 100%" @selection-change="handleSelectionChange" fit
        :max-height="maxHeightOther" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <el-table-column type="selection" :selectable="disCheck" width="40">
        </el-table-column>
        <el-table-column prop="name" label="设备名称" show-overflow-tooltip />
        <el-table-column prop="siteName" label="站点" show-overflow-tooltip />
        <el-table-column prop="nodeId" label="设备标识" show-overflow-tooltip />
        <el-table-column prop="deviceType" label="设备类型" min-width="110" />
        <el-table-column prop="model" label="设备型号" min-width="110" />
        <el-table-column prop="status" label="设备状态">
          <template slot-scope="scope">
            <span style="color:#67C23A" v-if="scope.row.status == 'ONLINE'">在线</span>
            <span style="color:#F56C6C" v-if="scope.row.status == 'OFFLINE'">离线</span>
            <span style="color:#F56C6C" v-if="scope.row.status == 'WARNING'">告警</span>
            <span style="color:#E6A23C" v-if="scope.row.status == 'INACTIVE'">未注册</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0 0 0;text-align: right;">共{{pagination.total}}条</div>
      <div style="text-align: right;margin-top:10px">
        <el-button type="primary" @click="handleSure" size="small">添加</el-button>
        <el-button @click="cancle" size="small">取消</el-button>
      </div>
    </el-dialog>
    <!-- 配置 -->
    <el-dialog title="配置设备" :visible.sync="dialogVisibleConfig" top="100px" width="55%" :close-on-click-modal="false" class="checkDialog">
      <h3>
        <img src="@/assets/images/xhlogo.png" style="vertical-align: middle;">
        {{configDeviceForm.name}}
      </h3>
      <el-form ref="configDevice" :model="configDeviceForm" label-width="175px" size="small" :rules="rules">
        <el-form-item label="设备型号" style="width:100%">
          <span>{{configDeviceForm.deviceModel}}</span>
        </el-form-item>
        <el-form-item label="智能网关SN" style="width:100%;">
          <div style="width:100%;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">
            {{configDeviceForm.deviceSn}}
          </div>
        </el-form-item>
        <el-form-item label="容器名称" prop="containerName" style="width:100%;">
          <el-input v-model="configDeviceForm.containerName" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器下标" prop="containerIndex" style="width:100%;">
          <el-input v-model="configDeviceForm.containerIndex" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器技术类型" prop="containerHyperv" style="width:100%;">
          <!-- <el-input v-model="configDeviceForm.containerHyperv" style="width:100%;"></el-input> -->
          <el-select v-model="configDeviceForm.containerHyperv" clearable style="width:100%;" placeholder="请选择">
            <el-option :label="item.name" v-for="item in hypervIoList" :value="item.value" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="容器IP地址" prop="containerIp" style="width:100%;">
          <el-input v-model="configDeviceForm.containerIp" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器使用核个数" prop="containerCpuCount" style="width:100%;">
          <el-input v-model.number="configDeviceForm.containerCpuCount" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器CPU的运行周期(μs)" prop="containerCpuPeriod" style="width:100%;">
          <el-input v-model.number="configDeviceForm.containerCpuPeriod" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器CPU运行时间(μs)" prop="containerCpuQuota" style="width:100%;">
          <el-input v-model.number="configDeviceForm.containerCpuQuota" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器分配内存（MB）" prop="containerMemoryTotal" style="width:100%;">
          <el-input v-model.number="configDeviceForm.containerMemoryTotal" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="容器存储空间（MB）" prop="containerStorageTotal" style="width:100%;">
          <el-input v-model.number="configDeviceForm.containerStorageTotal" style="width:100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="I/O 接口" style="width:100%;">
          <el-select v-model="configDeviceForm.containerIoPort" clearable multiple style="width:100%;" placeholder="请选择">
            <el-option :label="item.name" v-for="item in containerIoList" :value="item.value" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据卷列表" prop="containerStorageTotal" style="width:100%;" class="juanLists">
          <div v-for="(item, index) in configDeviceForm.volumes" :key="index" class="juanList">
            <el-form-item :prop="'volumes.' + index + '.path'" :rules="[{
              required: true, message: '请输入根目录', trigger: 'blur'
            },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
            ]" class="juanItem">
              <el-input v-model="item.path" @input="inputChange(item,index)" placeholder="数据卷的路径" clearable></el-input>
            </el-form-item>
            <el-form-item :prop="'volumes.' + index + '.size'" :rules="[{
              required: true, message: '请输入数据卷', trigger: 'blur'
            },]" class="juanItem">
              <el-input-number v-model="item.size" controls-position="right" step-strictly placeholder="数据卷的大小" :min="16" :max="860" :step="1" clearable>
              </el-input-number>
            </el-form-item>
            <el-form-item :prop="'volumes.' + index + '.visible'" :rules="[{
              required: true, message: '请选择权限', trigger: 'change'
            }]" class="juanItem">
              <el-select v-model="item.visible" clearable placeholder="请选择">
                <el-option v-for="item in  visibleList" :value="item.value" :key="item.value" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteJuan(row,$index)" v-if="configDeviceForm.volumes.length>1">删除</el-button>
            </el-form-item>
          </div>
          <el-form-item class="addBtn">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="addBox" v-if="configDeviceForm.volumes.length<8">添加卷</el-button>
          </el-form-item>
        </el-form-item>

      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="handleSave('configDevice')" size="small">保存</el-button>
        <el-button @click="dialogVisibleConfig = false" size="small">取消</el-button>
      </div>
    </el-dialog>
    <div style="text-align: right">
      <el-button type="primary" @click="nextConfig" size="small">下一步</el-button>
      <el-button size="small" @click="onCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { siteAllList } from "@/api/site/site";
import * as deviceApi from "@/api/link/device";
import { debounce } from "@/utils/index";
import elTableInfiniteScroll from "el-table-infinite-scroll";

export default {
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  comments: {},
  props: {},
  data() {
    return {
      volumesList:[],
      visibleList: [{ name: '不可访问', value: 0 }, { name: '可访问', value: 1 }],
      dialogVisibleVolume:false,
      forms: {},
      searchForm: {
        nodeType: 'GATEWAY'
      },
      dialogVisible: false,
      drawer: false,
      form: {},
      multipleSelection: [],
      deviceNodeIdList: [],
      tableData: [{}],
      siteList: [],
      nodeIdList: [],
      hypervIoList: [{ name: 'Docker容器', value: 'docker' }, { name: 'LXC容器', value: 'LXC容器' }],
      containerIoList: [{ name: "24:24", value: "24:24" }, { name: "/dev/ttyUART1:/dev/ttyUART1", value: "/dev/ttyUART1:/dev/ttyUART1" }, { name: "/dev/gpi38:/dev/gpi38", value: "/dev/gpi38:/dev/gpi38" }],
      deviceModelList: [{ name: "CSGSYY-PDZNWG-SN-102", value: "CSGSYY-PDZNWG-SN-102" }, { name: "CSGSYY-PDZNWG-SN-200", value: "CSGSYY-PDZNWG-SN-200" }],
      deviceTableData: [],
      SelectedTableData: [],
      tableDataUser: [],
      checktableDataUser: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      rules: {
        tenantId: [{ required: true, message: "请选择租户", trigger: "blur" }],
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
        containerName: [{ required: true, message: "请输入容器名称", trigger: "blur" }],
        containerIndex: [{ required: true, message: "请输入容器下标", trigger: "blur" }],
        containerIp: [{ required: true, message: "请输入容器IP地址", trigger: "blur" }],
        containerCpuCount: [{ required: true, message: "请输入容器使用核个数", trigger: "blur" },
        { type: 'number', message: '必须是数字值' }
        ],
        containerMemoryTotal: [{ required: true, message: "请输入容器分配内存（MB）", trigger: "blur" },
        { type: 'number', message: '必须是数字值' }],
        containerStorageTotal: [{ required: true, message: "请输入容器存储空间（MB）", trigger: "blur" },
        { type: 'number', message: '必须是数字值' }],
        containerCpuPeriod: [{ required: true, message: "请输入容器CPU的运行周期", trigger: "blur" },
        { type: 'number', message: '必须是数字值' }],
        containerCpuQuota: [{ required: true, message: "请输入CPU运行时间", trigger: "blur" },
        { type: 'number', message: '必须是数字值' }],
        containerHyperv: [{ required: true, message: "请输入容器技术类型", trigger: "blur" }],
        size: [{ required: true, message: "请输入卷的大小", trigger: "blur" }]
      },
      tenantList: [],
      checkUserList: [],
      configDeviceForm: {
        deviceModel: "",
        deviceSn: "",
        containerName: "ubuntu_v1",
        containerIp: "192.168.100.21",
        containerCpuCount: 2,
        containerMemoryTotal: 1024,
        containerStorageTotal: 1024,
        containerIoPort: ['/dev/ttyUART1:/dev/ttyUART1'],
        containerCpuPeriod: 100000,
        containerCpuQuota: -1,
        containerHyperv: 'docker',
        containerIndex: 1,
        volumes: [
          { path: '', size: '', visible: '' }
        ],

      },
      dialogVisibleConfig: false,
      scrollNum: 1,
      cacheIdList: [],//已选中的缓存数组
      installInfo: {},
      selectLoading: false,

    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 490;
    },
    maxHeightOther() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 380;
    },
    checkList() {
      let listAll = [];
      this.checkUserList.forEach((item) => {
        listAll.push(item.id);
      });
      return listAll;
    },
    checkNodeList() {
      let list = []
      this.SelectedTableData.forEach(item => {
        list.push(item.nodeId)
      })
      return list;
    }
  },
  created() {

  },
  mounted() {

    this.getSiteList()
    console.log(this.$route.query, 'this.$route.query');
    var queryObj = this.$route.query
    this.tableData = [queryObj]
    this.installInfo = {
      containerFileId: queryObj.id,//容器id
      containerFileName: queryObj.name,//容器名称
      taskName: queryObj.taskName,//任务名称
      tenantId: queryObj.tenantId,//租户id
      containerFileFactory: queryObj.manufactor,//容器文件厂家
      containerFileOperatingSystem: queryObj.operatingSystem,//容器文件操作系统
      containerFileSchema: queryObj.framework,//容器文件架构
      containerFileSize: queryObj.filesize,//容器文件大小
      containerFileVersion: queryObj.version,//容器版本
      deviceModel: '',
      containerTaskDetailDTOList: []
    }

  },
  methods: {
    checkVolume(item){
      this.volumesList = item.volumes
      this.dialogVisibleVolume = true
    },
    deleteJuan(row, index) {
      this.configDeviceForm.volumes.splice(index, 1)
    },
    addBox() {
      this.configDeviceForm.volumes.push({ path: '', size: '', visible: '' })
    },
    inputChange(item, index) {
      this.configDeviceForm.volumes[index].path = item.path.replace(/\s+/g, "")
    },
    inputChange1(item, index) {
      this.configDeviceForm.volumes[index].size = Math.floor(item.size)
    },
    disCheck(row) {
      return row.status == 'ONLINE' || row.status == 'WARNING'
    },
    remoteMethod(query) {
      if (query !== '') {
        let p = {
          nodeId: query
        };
        this.selectLoading = true;
        deviceApi.page(p).then(res => {
          this.deviceNodeIdList = res.data.list;
          this.selectLoading = false;
        })
      } else {
        this.deviceNodeIdList = [];
      }
    },
    // 下一步
    nextConfig() {
      if (!this.SelectedTableData.length) {
        this.$message({
          message: '容器未进行设备添加，不能进行下一步！',
          type: 'warning'
        });
        return
      }
      let flag = false
      this.SelectedTableData.some(item => {
        if (item.containerName == '' || !item.containerName) {
          flag = true
          return true
        }
      })
      if (flag) {
        this.$message({
          message: '设备未进行配置',
          type: 'warning'
        });
      } else {
        // 传值给父组件，执行下一步
        console.log(9999999)
        this.$bus.$emit('nextConfig', 1)
        // 传值给确认安装信息组件---兄弟组件传值
        this.$bus.$emit('INSTALLING', this.installInfo)
        console.log(this.installInfo, '传输数据到确认安装信息');
      }

    },
    onCancel() {
      this.$confirm('此操作将删除原有的数据配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({
          path: "/containerShop",
        })
      })

    },
    onChangeSite(val) {
      this.dialogSearch()
    },
    dialogSearch() {
      this.scrollNum = 1
      this.deviceTableData = []
      this.load()
    },
    dialogSearch2() {
      var idList = []
      this.SelectedTableData.map(item => {
        idList.push(item.id)
      })
      this.$nextTick(() => {
        this.deviceTableData.map(item => {
          if (idList.indexOf(item.id) != -1) {
            console.log(item);
            this.$refs['deviceTableDataRef'].toggleRowSelection(item, true)
          }
        })
      })
    },
    load: debounce(function () {
      this.pagination.page = this.scrollNum;
      if (this.searchForm.sitesId == '') {
        this.searchForm.sitesId = null
      }
      if (this.searchForm.deviceType == '') {
        this.searchForm.deviceType = null
      }
      if (this.searchForm.nodeId == '') {
        this.searchForm.nodeId = null
      }
      const p = Object.assign(this.searchForm, { pageSize: 20, page: this.scrollNum });
      deviceApi.page(p).then((resp) => {
        if (resp.data.list && resp.data.list.length) {
          var list = resp.data.list;
          this.deviceTableData = this.deviceTableData.concat(list);
          this.deviceNodeIdList = this.deviceTableData
          this.pagination.page = resp.data.pagination.current;
          this.pagination.total = resp.data.pagination.total
          this.scrollNum += 1;

          var idList = []
          if (this.SelectedTableData.length) {
            this.SelectedTableData.map(item => {
              idList.push(item.id)
            })
          } else {
            this.multipleSelection.map(item => {
              idList.push(item.id)
            })
          }

          this.$nextTick(() => {
            this.deviceTableData.map(item => {
              if (idList.indexOf(item.id) != -1) {
                this.$refs['deviceTableDataRef'].toggleRowSelection(item, true)
              }
            })
          })
        }
      });
    }, 1000),
    getSiteList() {
      let obj = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
      };
      siteAllList(obj).then((res) => {
        if (res.code == 200) {
          this.siteList = res.data;
        } else {
          this.siteList = []
        }
      });
    },
    handlerAdd(row) {
      this.dialogVisible = true
      this.deviceTableData.map(item => {
        if (this.checkNodeList.indexOf(item.nodeId) > -1) {
          this.$nextTick(() => {
            this.$refs['deviceTableDataRef'].toggleRowSelection(item)
          })
        }
      })
    },
    cancle() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.form = {}
      this.$refs.deviceTableDataRef.clearSelection();
    },

    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSure() {
      if (!this.multipleSelection.length) {
        this.$message({
          message: '请选择数据添加！',
          type: 'warning'
        });
        return
      }
      //合并两个数组
      // debugger
      // var list = [...this.SelectedTableData, ...this.multipleSelection]
      var list = [...this.multipleSelection]
      //去重
      let newJson = [];
      list.map(item1 => {
        let flag = true;  //建立标记，判断数据是否重复，true为不重复
        newJson.some(item2 => {
          if (item1.nodeId == item2.nodeId) { //让json数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
            flag = false;
            return true
          }
        })
        if (flag) { //判断是否重复
          newJson.push(item1); //不重复的放入新数组。  新数组的内容会继续进行上边的循环。
        }
      })
      newJson.map(item => {
        item.deviceModel = item.model
        item.deviceSn = item.nodeId
      })
      this.SelectedTableData = newJson
      this.$set(this.installInfo, 'containerTaskDetailDTOList', this.SelectedTableData)
      this.dialogVisible = false
    },
    handlerConfig() {
      this.configDeviceForm.name = this.tableData[0].name
      var nodeIdList = []
      var deviceModelList = []
      this.SelectedTableData.map(item => {
        nodeIdList.push(item.nodeId)
        deviceModelList.push(item.deviceModel)
      })
      console.log(deviceModelList)
      this.configDeviceForm.deviceSn = nodeIdList.join(',')
      this.configDeviceForm.deviceModel = deviceModelList.join(',')
      this.dialogVisibleConfig = true
    },

    handleDelete(row, index) {
      this.SelectedTableData.splice(index, 1);
    },
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var newConfigDeviceForm = Object.assign({}, this.configDeviceForm)
          console.log('newConfigDeviceForm: ', newConfigDeviceForm);
          if (Array.isArray(newConfigDeviceForm.containerIoPort)) {
            if (newConfigDeviceForm.containerIoPort.length) {
              newConfigDeviceForm.containerIoPort = this.configDeviceForm.containerIoPort.join(',')
            } else {
              newConfigDeviceForm.containerIoPort = null
            }
          }
          this.SelectedTableData.map((item, index) => {
            delete item.createTime
            delete item.updateOn
            this.$set(this.SelectedTableData[index], 'containerCpuCount', newConfigDeviceForm.containerCpuCount)
            this.$set(this.SelectedTableData[index], 'containerIoPort', newConfigDeviceForm.containerIoPort)
            this.$set(this.SelectedTableData[index], 'containerIp', newConfigDeviceForm.containerIp)
            this.$set(this.SelectedTableData[index], 'containerMemoryTotal', newConfigDeviceForm.containerMemoryTotal)
            this.$set(this.SelectedTableData[index], 'containerName', newConfigDeviceForm.containerName)
            this.$set(this.SelectedTableData[index], 'containerStorageTotal', newConfigDeviceForm.containerStorageTotal)
            // this.$set(this.SelectedTableData[index], 'deviceModel', newConfigDeviceForm.deviceModel)
            this.$set(this.SelectedTableData[index], 'deviceClientId', item.deviceId)
            this.$set(this.SelectedTableData[index], 'deviceNodeId', item.nodeId)
            this.$set(this.SelectedTableData[index], 'containerCpuPeriod', newConfigDeviceForm.containerCpuPeriod)
            this.$set(this.SelectedTableData[index], 'containerCpuQuota', newConfigDeviceForm.containerCpuQuota)
            this.$set(this.SelectedTableData[index], 'containerHyperv', newConfigDeviceForm.containerHyperv)
            this.$set(this.SelectedTableData[index], 'containerIndex', newConfigDeviceForm.containerIndex)
            this.$set(this.SelectedTableData[index], 'volumes', newConfigDeviceForm.volumes)
          })
          this.$set(this.installInfo, 'containerTaskDetailDTOList', this.SelectedTableData)
          this.dialogVisibleConfig = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
  },
};
</script>

<style lang="scss" scoped>
.configInstallInfo {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>

<style lang="scss">
.configInstallInfo {
  .el-dialog__body {
    padding: 0 20px 20px 20px !important;
  }
  .juanLists {
    .el-form-item__content {
      // display: flex;
      // align-items: center;
    }
  }
  .juanList {
    display: flex;
    align-items: center;
    position: relative;
    .juanItem {
      width: 30%;
      .el-input-number {
        width: 100% !important;
      }
    }
    .addBtn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.checkDialog {
  .el-dialog__body {
    padding: 0 100px 20px 100px !important;
  }
}
</style>
